সিএসএস কম্বিনেটর

সিএসএস সিলেক্টরের ক্ষেত্রে এক বা একাধিক এলিমেন্টকে একত্রে সিলেক্ট করা যায়। আমরা দুইটি এলিমেন্টে সিলেক্টরের মাঝে কম্বিনেটর ব্যবহার করতে পারি।

সিএসএস(৩) এ চারটি ভিন্ন কম্বিনেটর রয়েছেঃ

• বংশধর সিলেক্টর - descendant selector(space)
• চাইল্ড সিলেক্টর - child selector(>)
• সহোদর সিলেক্টর - adjacent sibling selector(+)
• সাধারণ সহোদর সিলেক্টর - general sibling selector(~)

বংশধর(descendant) সিলেক্টর

একটি এলিমেন্টের মধ্যে অবস্থিত সকল বংশধর বা ডিসেন্ডেন্ট এলিমেন্টকে সিলেক্ট করার জন্য ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে বংশধর(descendant) সিলেক্টর ব্যবহার করে < div> এলিমেন্টের মধ্যে অবস্থিত সকল < p> এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=851

চাইল্ড(child) সিলেক্টর

একটি এলিমেন্টের মধ্যে অবস্থিত সরাসরি চাইল্ড এলিমেন্ট গুলো সিলেক্ট করতে চাইল্ড সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে < div> এলিমেন্টের মধ্যের < p> এলিমেন্টগুলো থেকে যেগুলো < div> এর সরাসরি চাইল্ড সেগুলোকে সিলেক্ট করবেঃ

kt_satt_skill_example_id=853

সহোদর(adjacent sibling) সিলেক্টর

একটি এলিমেন্টের পরবর্তী প্রথম সিবলিং এলিমেন্টকে সিলেক্ট করার জন্য সহোদর(adjacent sibling) সিলেক্টর ব্যবহার করা হয়।

সিবলিং এলিমেন্ট গুলো অবশ্যই একই প্যারেন্ট এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং adjacent sibling - এর ক্ষেত্রে এটি শুধুমাত্র এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করবে।

নিম্নের উদাহরণটিতে শুধুমাত্র < div> এলিমেন্টের পরবর্তী সিবলিং < p> এলিমেন্টটিকে সিলেক্ট করবেঃ

kt_satt_skill_example_id=855

সাধারণ সহোদর(general sibling) সিলেক্টর

একটি এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য জেনারেল সিবলিং সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে < div> এলিমেন্টের পরবর্তী সকল সিবলিং < p> এলিমেন্ট গুলো সিলেক্ট করবেঃ

kt_satt_skill_example_id=857